[給心理人的前端網頁開發] 10 關卡一：自介履歷之 CSS

2023 iThome 鐵人賽

DAY 10

Modern Web

給心理人的前端網頁開發系列第 10 篇

15th鐵人賽

ayugioh2003

2023-09-25 23:27:16

189 瀏覽

分享至

關卡一是幫一個人物寫履歷網頁，主角是一個新興 Vtuber 叫 HowB8，履歷網頁有他的頭貼、設定、經歷與作品集。請先點開連結查看效果：

[給心理人的前端網頁開發] 08 自介履歷 - CodeSandbox

除了用 HTML 幫履歷添加內容外，想讓履歷好看一點，也會需要用 CSS 去美化一下。CSS 的語法列於文末。以下將講解此 CSS 語法的意義。

一、在網頁引入 CSS

在前面幾天的文章我們知道，當瀏覽器載入網頁時，會優先載入 HTML 檔案中的內容。如果想載入 CSS 樣式的話，就需要額外載入才行。載入 CSS 檔案的方式是用 <link> 。

<head>
  <link href="./main.css" rel="stylesheet" />
</head>

二、CSS 的選擇器

前幾天的文章有提到，CSS 主要由規則所組成。

選擇器 {
  屬性: 屬性值
}

在初學網頁時，最常用的選擇器有兩種類型：element (標籤/元素) 以及 class(CSS 自定義類別)。如果是 element 的話，只要在 CSS 中填入該標籤的名稱就好。例如 HTML 中 <h1> 這個標籤，在 CSS 中只要在規則中選擇器的部份填入 h1 就好。

CSS 另一種常見的選擇器類型是 class。要使用這種類型的選擇器，會先在 HTML 中的標籤上，加上 class 屬性，然後多增加一個自定義的 class 名稱。這樣之後就能在 CSS 檔案中使用。以下附上範例

// body 是 element 選擇器，代表此規則會套用在 HTML 中的 body 標籤元素上
body {
  background-color: #eeeeee;
}

// .container 是 class 選擇器(用 . 開頭)，代表此規則會套用在 HTML 中有 container class 的元素上
.container {
  background-color: white;
}

延伸閱讀

三、使用到的 CSS 介紹

3-1 網頁水平置中

現在電腦螢幕越做越大，在影音或遊戲體驗時，大螢幕可以帶來良好體驗。但在閱讀文章時，若文字過於滿版的話，反而會造成閱讀困難。為了給予良好閱讀體驗，這邊讓 .container 設定了最大寬度 max-width: 600px。

另外，為了讓畫面布局好看一點，所以想讓履歷可以水平置中。這時可以讓 <body> 的 display 布局變成是 flex ，並且讓內部的內容物透過 justify-content: center 達到水平置中的效果。

同時， display: flex 還有另外一個好處。本來圖片是會隨著其他文字一起垂直排版的，但透過 display: flex 的話，內容物就會變成水平排版。

延伸閱讀

body {
  display: flex;
  justify-content: center;
}
.container {
  max-width: 600px;
}

3-2 內距與外距

對於每個 HTML 中的標籤(元素)來說，可以把它們想成程式一個正方形的箱子。這個箱子除了內部有東西外 (content)，內部的東西與箱子木板會有一段內部距離 (padding，內距)，而箱子跟其他的箱子會有外部距離 (margin，外距)。在 CSS 中，我們可以透過 padding 與 margin 來調整元素對內與對外的距離。

延伸閱讀

body {
  padding-top: 50px;
  padding-bottom: 50px;
}

.container {
  padding: 50px;
}

.header__img {
  margin-right: 30px;
}

3-3 元素的高與寬

人有環肥燕瘦，元素也有自己的高與寬度。高的話就是 height，寬的話就是 width。

延伸閱讀

.container {
  max-width: 600px;
}

.header__img {
  width: 200px;
  height: 200px;
}

3-4 元素的背景顏色

為了讓履歷視覺上更聚焦，主要內容的背景顏色是白色，而其他部份則是使用灰色。CSS 中顏色的值有很多表示方式，例如預設的顏色名稱 white, black、或是使用十六進位制的色碼、RGB 色碼等等。

延伸閱讀

body {
  background-color: #eeeeee;
}

.container {
  background-color: white;
}

小結

本文簡單介紹了履歷 demo 中使用到的 CSS

如何引入 CSS 到 HTML
CSS 選擇器的使用
履歷 demo 中使用到的 CSS 介紹

下一篇將說明，或許你不需要自己寫網頁做履歷

小作業：試著調整履歷的背景顏色、內外間距

附註：CSS 的程式碼

body {
  display: flex;
  justify-content: center;
  background-color: #eeeeee;
  padding-top: 50px;
  padding-bottom: 50px;
}

.container {
  max-width: 600px;
  padding: 50px;
  background-color: white;
}

.header {
  display: flex;
}
.header__img {
  width: 200px;
  height: 200px;
  margin-right: 30px;
}